<template>
	<view class="main" style="height: 100%;display: flex;flex-direction: column;" @touchmove.stop.prevent="() => {}">
		<view class="top" style="height: 45px;">
			<view class="up" style="display: flex;margin-left: 8px;margin-top: 8px;width: 192px;">
				<u-button text="当日" :custom-style="day" @click="toggleButton('day')"></u-button>
				<u-button text="本周" :custom-style="week" @click="toggleButton('week')"></u-button>
				<u-button text="本月" :custom-style="month" @click="toggleButton('month')"></u-button>
				<u-button text="全部" :custom-style="all" @click="toggleButton('all')"></u-button>
			</view>
			<view class="down">
				<div style="margin-top: 8px;">
					<u-line></u-line>
				</div>
			</view>
		</view>
		<u-sticky>......</u-sticky>
		<view class="bottom" style="height: 100%-45px;">
			<u-list>
				<u-list-item v-for="(item,index) in xjList" :key="index">
					<div style="height: 300px;margin: 15px;" @click="detailXJ(item)">
						<div style="font-size: 16px;font-family: 'PingFang SC';color:#212121;">{{item.jhmc}}</div>
						<div style="font-size: 14px;font-family: 'Noto Sans CJK SC';color:#666666;margin-top: 4px;">{{item.gznr}}</div>
						<div style="display: flex;margin-top: 4px;">
							<div style="font-size: 12px;font-family: 'Noto Sans CJK SC';color:#999999;margin-top: 4px;">频率：{{item.pc}}</div>
							<div style="font-size: 12px;font-family: 'Noto Sans CJK SC';color:#999999;margin-top: 4px;margin-left: 16px;">时间：{{item.yxkssj}}至{{item.yxjssj}}</div>
							<u-button v-show="item.planStatus==='未巡检'" type="error" class="xjbtn" >{{item.planStatus}}</u-button>
							<u-button v-show="item.planStatus==='进行中'" type="primary" class="xjbtn" >{{item.planStatus}}</u-button>
							<u-button v-show="item.planStatus==='已完成'" type="success" class="xjbtn" >{{item.planStatus}}</u-button>
						</div>
						<div style="margin-top: 180px;">test</div>
					</div>
					<u-line></u-line>
				</u-list-item>
			</u-list>
			
		</view>
	</view>
</template>

<script>

import croods from '@/common/croods-1.3.3.js';     window.croods = croods;  window.hydra =  require('../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {getDateDic,getPlan} from '@/common/api.js'
	export default{
		onShow(){
			this.getDateL(),
			this.getStatusL(),
			this.queryByDate()
		},
		data(){
			return{
				/* 日期 */
				date:{
				  status: "Enabled",
				  type: "MAINTENANCE_FREQUENCY"
				},
				dateList:[],
				/* 状态 */
				status:{
				  status: "Enabled",
				  type: "INSPECTION_STATUS"
				},
				statusList:[],
				/* 按钮样式 */
				day:{
					backgroundColor: "rgba(255, 80, 0, 0.1)",
					color: "#FF5000",
					width: "48px",
					height: "28px",
					borderRadius: "16px"
				},
				week:{
					backgroundColor: "#F9F9F9",
					color: "#212121",
					width: "48px",
					height: "28px",
					borderRadius: "16px",
					marginLeft:"6px"
				},
				month:{
					backgroundColor: "#F9F9F9",
					color: "#212121",
					width: "48px",
					height: "28px",
					borderRadius: "16px",
					marginLeft:"6px"
				},
				all:{
					backgroundColor: "#F9F9F9",
					color: "#212121",
					width: "48px",
					height: "28px",
					borderRadius: "16px",
					marginLeft:"6px"
				},
				/* 巡检列表 */
				xjList:[],
				reqXJ:{
					pageNum:1,
					pageSize:10,
					pc:"day",
					userId:10016
				},
				isOver:false,
				isChange:false,
				
				
			}
		},
		methods:{
			refresh(){
				this.getDateL(),
				this.getStatusL(),
				this.queryByDate()
			},
			/* 查询日期数据字典 */
			getDateL(){
				getDateDic(this.date).then(response => {
					this.dateList = response
				})
			},
			/* 查询状态数据字典 */
			getStatusL(){
				getDateDic(this.status).then(response => {
					this.statusList = response
				})
			},
			/* 按钮 */
			toggleButton(e){
				this.setBottonColor();
				if(e==="day"){
					this.change(e)
					this.reqXJ.pc = "day";
					this.day.backgroundColor = "rgba(255, 80, 0, 0.1)";
					this.day.color = "#FF5000";
					this.queryByDate();
				}else if(e==="week"){
					this.change(e)
					this.reqXJ.pc = "week";
					this.week.backgroundColor = "rgba(255, 80, 0, 0.1)";
					this.week.color = "#FF5000";
					this.queryByDate();
				}else if(e==="month"){
					this.change(e)
					this.reqXJ.pc = "month";
					this.month.backgroundColor = "rgba(255, 80, 0, 0.1)";
					this.month.color = "#FF5000";
					this.queryByDate();
				}else if(e==="all"){
					if(this.reqXJ.pc === null){
						this.isChange = false
					}else{
						this.isChange = true
					}
					this.reqXJ.pc = null;
					this.all.backgroundColor = "rgba(255, 80, 0, 0.1)";
					this.all.color = "#FF5000";
					this.queryByDate();
				}else{
					this.change(e)
					this.reqXJ.pc = "day";
					this.day.backgroundColor = "rgba(255, 80, 0, 0.1)";
					this.day.color = "#FF5000";
					this.queryByDate();
				}
			},
			change(e){
				if(this.reqXJ.pc === e){
					this.isChange = false
				}else{
					this.isChange = true
				}
			},
			/* 重置样式 */
			setBottonColor(){
				this.day.backgroundColor = "#F9F9F9";
				this.day.color = "#212121";
				this.week.backgroundColor = "#F9F9F9";
				this.week.color = "#212121";
				this.month.backgroundColor = "#F9F9F9";
				this.month.color = "#212121";
				this.all.backgroundColor = "#F9F9F9";
				this.all.color = "#212121";
			},
			
			/* 数据查询 */
			queryByDate(){
				getPlan(this.reqXJ).then(response =>{
					if(this.isChange){
						this.xjList = []
					}
					if(response.nextPage===0){
						this.isOver = true
					}else{
						this.isOver = false
					}
					let temp = response.list;
					temp.forEach(item => {
						item.yxkssj = item.yxkssj.slice(0,10);
						item.yxjssj = item.yxjssj.slice(0,10);
						let dateTemp = this.dateList.find(date => date.code === item.pc);
						if (dateTemp) {
						  item.pc = dateTemp.name;
						}
						let statusTemp = this.statusList.find(status => status.code === item.planStatus);
						if (statusTemp) {
						  item.planStatus = statusTemp.name;
						}
					});
					if(this.xjList.length===0){
						this.xjList = temp
					}else{
						temp.forEach(newItem => {
							let existingItem = this.xjList.find(item => item.id === newItem.id);
							if (!existingItem) {
								this.xjList.push(newItem);
							}
						});
					}
					console.log(this.xjList)
				}) 
			},
			/* 跳转至详情界面 */
			detailXJ(item){
				uni.navigateTo({
					url:`/pages/xjyw/xjrw/index?id=${item.id}&title=${item.jhmc}`,
				})
			},
		},
		mounted(){
			this.getDateL(),
			this.getStatusL(),
			this.queryByDate()
		}
	}
</script>

<style>



.xjbtn{
	width: 62px;
	height: 28px;
	font-size: 12px;
	margin-right: 0px;
	font-family: 'PingFang SC';
	border-radius: 4px;	
}
</style>